<header class="city-head flex">
    <div class="city-return">
        <i class="iconfont icon-zuojiantou"></i>
    </div>
    <div class="city-input">选择城市</div>
</header>
<section class="elt-city widthMax freeTravalCity">
    <dl class="am-cf">
        <dt>当前城市</dt>
        <dd class="elt-loction flex">
            <div class="flex-1">
                <i class="iconfont">&#xe662;</i>
                <a href="javascript:;" id="position-city"><?php echo get_cookie('city');?></a>
            </div>
            <i id="goto-position" class="iconfont elt-icon">&#xe661;</i>
        </dd>
    </dl>
    <dl class="am-cf elt-hot">
        <dt>热门城市</dt>
        <dd><a href="javascript:;" data-id="52" data-name="北京" >北京</a></dd>
        <dd><a href="javascript:;" data-id="321" data-name="上海" >上海</a></dd>
        <dd><a href="javascript:;" data-id="76" data-name="广州" >广州</a></dd>
        <dd><a href="javascript:;" data-id="77" data-name="深圳" >深圳</a></dd>
        <dd><a href="javascript:;" data-id="343" data-name="天津" >天津</a></dd>
        <dd><a href="javascript:;" data-id="383" data-name="杭州" >杭州</a></dd>
        <dd><a href="javascript:;" data-id="221" data-name="苏州" >苏州</a></dd>
        <dd><a href="javascript:;" data-id="388" data-name="宁波" >宁波</a></dd>
        <dd><a href="javascript:;" data-id="98" data-name="桂林" >桂林</a></dd>
        <dd><a href="javascript:;" data-id="44" data-name="黄山" >黄山</a></dd>
        <dd><a href="javascript:;" data-id="180" data-name="武汉" >武汉</a></dd>
        <dd><a href="javascript:;" data-id="149" data-name="郑州" >郑州</a></dd>
        <dd><a href="javascript:;" data-id="311" data-name="西安" >西安</a></dd>
        <dd><a href="javascript:;" data-id="167" data-name="哈尔滨" >哈尔滨</a></dd>
        <dd><a href="javascript:;" data-id="394" data-name="重庆" >重庆</a></dd>
        <dd><a href="javascript:;" data-id="284" data-name="青岛" >青岛</a></dd>
        <dd><a href="javascript:;" data-id="297" data-name="烟台" >烟台</a></dd>
        <dd><a href="javascript:;" data-id="322" data-name="成都" >成都</a></dd>
    </dl>
    <dl class="am-cf elt-spell">
        <dt>拼音搜索</dt>
        <dd><a href="javascript:;">A</a></dd>
        <dd><a href="javascript:;">B</a></dd>
        <dd><a href="javascript:;">C</a></dd>
        <dd><a href="javascript:;">D</a></dd>
        <dd><a href="javascript:;">E</a></dd>
        <dd><a href="javascript:;">F</a></dd>
        <dd><a href="javascript:;">G</a></dd>
        <dd><a href="javascript:;">H</a></dd>
        <dd><a href="javascript:;">J</a></dd>
        <dd><a href="javascript:;">K</a></dd>
        <dd><a href="javascript:;">L</a></dd>
        <dd><a href="javascript:;">M</a></dd>
        <dd><a href="javascript:;">N</a></dd>
        <dd><a href="javascript:;">P</a></dd>
        <dd><a href="javascript:;">Q</a></dd>
        <dd><a href="javascript:;">R</a></dd>
        <dd><a href="javascript:;">S</a></dd>
        <dd><a href="javascript:;">T</a></dd>
        <dd><a href="javascript:;">W</a></dd>
        <dd><a href="javascript:;">X</a></dd>
        <dd><a href="javascript:;">Y</a></dd>
        <dd><a href="javascript:;">Z</a></dd>
    </dl>
    <dl class="am-cf elt-hot">
        <dt>A</dt>
        <?php $i='A';foreach($allCities as $item): ?>
            <?php if ($item->region_abbr{0} != $i) :?>
                <?php $i = $item->region_abbr{0};?>
                <dt><?php echo $item->region_abbr{0};?></dt>
            <?php else : ?>
                <dd>
                    <a href="javascript:;" data-id="<?php echo $item->region_id;?>" data-name="<?php echo $item->region_name;?>" >
                        <?php echo $item->region_name;?>
                    </a>
                </dd>
            <?php endif;?>
        <?php endforeach; ?>
    </dl>
</section>

<script type="text/javascript">
$(function(){
    $('.elt-spell').on('click','a',function(){
        var txt = $(this).text().trim();
        $('.elt-hot').find('dt').each(function(){
            if($(this).text().trim()==txt){
                var top=$(this).offset().top;
               $('html,body').animate({scrollTop:top},1000);
            }
        })
        return false;
    })
})
</script>